<template>
  <div class="panel-inner-wrapper">
    <div class="left">
      <img :src="innerGoodsInfo.goods_image ? innerGoodsInfo.goods_image : innerGoodsInfo.cover" alt />
    </div>
    <div class="right">
      <p class="name">{{innerGoodsInfo.goods_name ? innerGoodsInfo.goods_name : innerGoodsInfo.name}}</p>
      <p class="num">
        <span class="integ">{{innerGoodsInfo.goods_score ? innerGoodsInfo.goods_score : innerGoodsInfo.score}}积分</span>
        <slot />
      </p>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    innerGoodsInfo: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/mixin.scss";
.panel-inner-wrapper {
  width: 100%;
  height: 1.86rem;
  display: flex;
  align-items: center;
  .left {
    width: 1.86rem;
    height: 1.86rem;
    overflow: hidden;
    img {
      height: 100%;
    }
  }
  .right {
    flex: 1;
    height: 100%;
    padding: 0.2rem 0.3rem;
    padding-right: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .name {
      width: 4rem;
      font-size: 0.28rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(68, 68, 68, 1);
      line-height: 0.36rem;
      @include ellipsisTwo();
    }
    .num {
      margin-top: 0.45rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .integ {
        font-size: 0.28rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 0.32rem;
      }
    }
  }
}
</style>
